<template>
<div>
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark">
      <h2>客户管理</h2>
    </div></el-col>
  </el-row>

  <el-dialog
      :visible.sync="addCilent1"
      width="60%"
      @opened="open"
  >
  <AddCilent :movie-id="addCilentId" v-if="addCilent2" ref="addCilentRef"></AddCilent>
  </el-dialog>

  <el-dialog
      :visible.sync="updateCilent1"
      width="60%"
      @opened="open"
  >
    <UpdateCilent :movie-id="updateCilentId" v-if="updateCilent2" ref="updateCilentRef"></UpdateCilent>
  </el-dialog>

  <el-dialog
      :visible.sync="findByCilent1"
      width="60%"
      @opened="open"
  >
    <FindByCilent :movie-id="findByCilentId" v-if="findByCilent2" ref="findByCilentRef"></FindByCilent>
  </el-dialog>

  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <el-table
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%">
          <el-table-column
              prop="clientName"
              label="客户名称"
              align="center">
          </el-table-column>
          <el-table-column
              prop="clientHead"
              label="负责人"
              align="center">
          </el-table-column>
          <el-table-column
              prop="clientScope"
              label="经营范围"
              align="center">
          </el-table-column>
        </el-table>
      </div>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <div class="block">
          <el-pagination
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="currentPageFn"
          >
          </el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>

  <el-row style="margin-top: 50px">
    <el-col :span="12">
      <div class="grid-content bg-purple">
        <el-button type="primary" plain style="margin-right: 20px" @click="addCilent">添加客户</el-button>
        <el-button type="primary" plain style="margin-left: 20px" @click="updateCilent">修改客户信息</el-button>
        <br>
        <el-button type="primary" plain style="margin-top: 20px;margin-right: 20px" @click="findByCilent">查看客户</el-button>
        <el-button type="primary" plain style="margin-top: 20px;margin-left: 20px" @click="downLoadCilentForm">下载客户表单</el-button>
      </div>
    </el-col>

    <el-col :span="9">
      <div class="grid-content bg-purple-light">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="margin-right: 60px">查询客户信息</span>
            <el-row style="margin-top: 15px">
              <el-col :span="7" class="labClass">
                <div class="grid-content bg-purple">
                  客户名称：
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  <el-input v-model=" clientName" placeholder="请输入内容" class="labClass"></el-input>
                </div>
              </el-col>
            </el-row>

            <el-row style="margin-top: 10px">
              <el-col :span="7" class="labClass">
                <div class="grid-content bg-purple">
                  经营范围：
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="clientScope" placeholder="请输入内容" class="labClass"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-button type="primary" plain style="margin-right: 20px" @click="init">查询</el-button>
        </el-card>
      </div>
    </el-col>
  </el-row>

</div>
</template>

<script>
import AddCilent from "./addCilent";
import UpdateCilent from "./updateCilent";
import FindByCilent from "./findByCilent";
export default {
  name: "cilent",
  components: {UpdateCilent, AddCilent,FindByCilent},
  data(){
    return{
      tableData:[],
      total: 0,
      pageSize: 4,
      currentPage: 1,
      clientName:null,
      clientScope:null,

      currentRow:'',

      addCilent1:false,
      addCilentId:0,
      addCilent2:false,

      updateCilent1:false,
      updateCilentId:0,
      updateCilent2:false,

      findByCilent1:false,
      findByCilentId:0,
      findByCilent2:false
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    handleCurrentChange(val){
      this.currentRow=val;
    },
    init(){
      let params={
        current:this.currentPage,
        size:this.pageSize,
        clientName:this.clientName,
        clientScope:this.clientScope
      }
      this.$axios.get('drp/cilent/findByItem', {params: params}).then(
          r => {
            this.tableData = r.data.records;
            this.total = r.data.total;
          }
      )
    },
    currentPageFn(currentPage){
      this.currentPage=currentPage
      this.init()
    },
    addCilent(){
      this.addCilent1=true;
      this.addCilent2=true
    },
    updateCilent(){
      if (this.currentRow==''){
        this.$message({
          message: '请选中一行',
          type: 'warning'
        });
      }else {
        this.updateCilent1=true
        this.updateCilent2=true
        this.$nextTick(()=>{
          this.$refs.updateCilentRef.init(this.currentRow.clientId)
        })
      }
    },
    findByCilent(){
      if (this.currentRow==''){
        this.$message({
          message: '请选中一行',
          type: 'warning'
        });
      }else {
        this.findByCilent1=true
        this.findByCilent2=true
        this.$nextTick(()=>{
          this.$refs.findByCilentRef.init(this.currentRow.clientId)
        })
      }
    },
    open(){
      console.log("客户打开了")
    },
    downLoadCilentForm(){
      location.href="drp/cilent/exportExcel"
    }
  }
}
</script>

<style scoped>

</style>